<template>
    <div class="person">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
        <hr>
        <h2>测试a: {{ a }}</h2>
        <button @click="b">测试</button>
        <h2>测试c: {{ c }}</h2>
    </div>
</template>
<script lang="ts">
export default {
    name: 'Person',
    beforeCreate(){
        console.log('beforeCreate')
    },
    // 这是vue2写法
    data() {
        // setup先于data,methods执行,所以this.name可以读到值
        return {
            a: 100,
            c: this.name,
        }
    },
    methods:{
        b(){
            console.log(this.a)
            console.log(this.name)
            this.showTel()
        }
    },
    // 这是vue3写法
    // 这里无法读到data()里的数据,也无法调用methods里的方法
    setup(){
        console.log('setup')
        // 数据,原来是写在data中,此时的name,age,tel都不是响应式的数据
        let name = '张三'
        let age = 18
        let tel = '138888888'

        const changeName = () => {
            name = '李四' // 因为name不是响应式的,这样修改name,页面不会变化
            console.log(name) // name的值有变化,但这个变化不会反应在页面上
        }
        const changeAge = () => {
            age++
        }
        const showTel = () => {
            alert(tel)
        }

        return { name, age, changeName, changeAge, showTel }
        // return "helo" 页面没有任何东西,控制台警告
        // setup返回值也可以是一个渲染函数
        // return function(){ return "hello" } // 页面显示 hello
        // return ()=> "hello2" // 没有this,可以简写为箭头函数,与上面的等价
    }
}
</script>
<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 2px;
}
</style>